<template>
<q-dialog persistent fixed v-model="isCreateDialog" :maximized="$q.platform.is.mobile" position="standard" transition-show="slide-up" transition-hide="slide-down">
    <q-layout view="hHh Lpr fFf" container class="bg-dark hide-scrollbar">
        <q-header class="bg-grey-10 shadow-7">

            <q-toolbar>
                <q-toolbar-title>{{ createTask.pt_id>0?'修改日程':'创建日程'}}</q-toolbar-title>
                <q-space />

                <q-btn dense flat icon="close" @click="trigerUpdate('close')">
                </q-btn>
            </q-toolbar>

        </q-header>
        <q-footer class="bg-grey-10 text-white q-pa-sm shadow-up-7">

            <q-toolbar inset>

                <q-space></q-space>
                <q-btn  outline class="q-px-md q-mr-sm" color="red-6" v-if="createTask.pt_id>0" @click="handleDeleteTask"> 删除</q-btn>
                <q-btn  outline class="q-px-md" v-if="createTask.pt_id>0" @click="submitUpdateTask"> 更新</q-btn>
                <q-btn  outline class="q-px-md q-mr-sm" v-if="createTask.pt_id.length==0" @click="canclecreateTask"> 取消</q-btn>
                <q-btn  outline class="q-px-md" v-if="createTask.pt_id.length==0" @click="submitcreateTask"> 创建</q-btn>
            </q-toolbar>
        </q-footer>
        <q-page-container>
            <q-page padding class="bg-dark row hide-scrollbar">

                <q-card flat style="width: 100%" class="back-dark column">

                    <!-- <q-separator color="grey"></q-separator> -->
                    <q-card-section class="q-px-md q-mx-md">
                        <q-form ref="createForm" class="column q-gutter-sm">
                            <q-input  filled dark v-model="createTask.name" label="日程名称" maxlength="12" counter lazy-rules :rules="[(val) => (val !== null && val !== '') || '请输入日程名']" />

                            <q-input  @input="handleStimeInput" filled dark v-model="createTask.stime" label="开始时间" lazy-rules :rules="[(val) => (val !== null && val !== '') || '请输入开始时间',]" debounce="500">
                                <template v-slot:prepend>
                                    <q-icon size="30px" name="event" class="cursor-pointer">
                                        <q-popup-proxy ref="qDateProxy" transition-show="scale" transition-hide="scale">
                                            <q-date v-model="createTask.stime" minimal mask="YYYY-MM-DD HH:mm">
                                                <div class="row items-center justify-end">
                                                    <q-btn v-close-popup label="确认" color="primary" flat />
                                                </div>
                                            </q-date>

                                        </q-popup-proxy>
                                    </q-icon>
                                </template>
                                <template v-slot:append>
                                    <q-icon name="access_time" class="cursor-pointer">
                                        <q-popup-proxy transition-show="scale" transition-hide="scale">
                                            <q-time v-model="createTask.stime" mask="YYYY-MM-DD HH:mm" format24h>
                                                <div class="row items-center justify-end">
                                                    <q-btn v-close-popup @click="handleStimeInput" label="确认" color="primary" flat />
                                                </div>
                                            </q-time>
                                        </q-popup-proxy>
                                    </q-icon>
                                </template>
                            </q-input>
                            <q-input  filled dark v-model="createTask.etime" label="结束时间" lazy-rules :rules="[(val) => (val !== null && val !== '') || '请输入结束时间']" debounce="500">
                                <template v-slot:prepend>
                                    <q-icon size="30px" name="event" class="cursor-pointer">
                                        <q-popup-proxy ref="qDateProxy" transition-show="scale" transition-hide="scale">
                                            <q-date v-model="createTask.etime" minimal mask="YYYY-MM-DD HH:mm">
                                                <div class="row items-center justify-end">
                                                    <q-btn v-close-popup label="确认" color="primary" flat />
                                                </div>
                                            </q-date>

                                        </q-popup-proxy>
                                    </q-icon>
                                </template>
                                <template v-slot:append>
                                    <q-icon name="access_time" class="cursor-pointer">
                                        <q-popup-proxy transition-show="scale" transition-hide="scale">
                                            <q-time v-model="createTask.etime" mask="YYYY-MM-DD HH:mm" format24h>
                                                <div class="row items-center justify-end">
                                                    <q-btn v-close-popup label="确认" color="primary" flat />
                                                </div>
                                            </q-time>
                                        </q-popup-proxy>
                                    </q-icon>
                                </template>
                            </q-input>
                            <q-input  filled dark v-model="createTask.address.name" label="日程地点" lazy-rules :rules="[(val) => (val !== null && val !== '') || '请输入地点']" :hint="createTask.address.region">
                                <template v-slot:append>
                                    <q-icon @click="isMapDialog=!isMapDialog" name="mdi-map-marker-outline" class="cursor-pointer">
                                    </q-icon>
                                </template>
                            </q-input>

                            <q-input  filled dark v-model="createTask.color" class="my-input" lazy-rules :rules="[(val) => (val !== null && val !== '') || '请选择标签颜色']" debounce="500" label="日程颜色">
                                <template v-slot:prepend>
                                    <q-badge class="text-white" :style="'background-color:'+createTask.color">日程 </q-badge>
                                </template>
                                <template v-slot:append>
                                    <q-icon name="colorize" class="cursor-pointer">
                                        <q-popup-proxy transition-show="scale" transition-hide="scale">
                                            <q-color :palette="[
                                    '#019A9D', '#D9B801', '#E8045A', '#B2028A',
                                    '#8bc34a', '#4caf50','#ffc107','#ff5722','#00bcd4','#3f51b5','#2196f3'
                                  ]" default-view="palette" flat v-model="createTask.color">

                                            </q-color>
                                            <div class="row items-center justify-end">
                                                <q-btn v-close-popup label="确认" color="primary" flat />
                                            </div>
                                        </q-popup-proxy>
                                    </q-icon>
                                </template>
                            </q-input>

                            <q-select  filled dark v-model="createTask.type" :options="typeOptions" option-label="name" option-value="val" label="日程类型" emit-value map-options />

                            <!-- <q-select  filled dark v-model="createTask.remind" :options="remindOptions" option-label="name" option-value="val" label="是否提醒" emit-value map-options /> -->

                            <q-input  v-if="createTask.type==1" filled dark v-model="createTask.subject" label="联系人" lazy-rules :rules="[(val) => (val !== null && val !== '') || '请输入联系人']">

                            </q-input>
                            <q-input  v-if="createTask.type==1" filled dark v-model="createTask.concat" label="联系方式" lazy-rules :rules="[(val) => (val !== null && val !== '') || '请输入联系方式']">

                            </q-input>
                            <q-input  v-if="createTask.type==1" filled dark v-model="createTask.description" label="任务描述">

                            </q-input>

                        </q-form>

                    </q-card-section>
                    <q-card-section class="q-px-md q-mx-md">
                        <div class="row justify-between items-center">
                            <div class="text-h6">日程成员</div>
                            <q-btn  flat @click="handleSelectMemeber" dense color="primary" class="text-caption">
                                <q-icon size="20px" name="mdi-account-edit-outline"></q-icon>选择成员
                            </q-btn>
                        </div>
                        <q-separator color="grey"></q-separator>
                        <member-list :isPermission="false"  :memberList="selectedTaskMembers" @update="updatePermission" @remove="removeSelectedMember"></member-list>
                    </q-card-section>

                </q-card>
                <map-dialog :isMapDialog="isMapDialog" @update="handleMapDialog" :place.sync="createTask.address"></map-dialog>
                <taskmember-select ref="memberSelect" :taskMembers="taskMembers" :memberList="selectedTaskMembers" :isMemSeleteDialog="isMemSeleteDialog" @update="memberSelectedRes"></taskmember-select>

            </q-page>
        </q-page-container>

    </q-layout>

</q-dialog>
</template>

<script>
// import {
//     createTask,
//     getProjectType
// } from "assets/api/project";
import {
    addTaskEvent,
    updateTaskEvent,
    deleteTaskEvent
} from "assets/api/studio/progress"
import moment from 'moment';
export default {
    name: 'createTask',
    components: {
        TaskmemberSelect: () => import("components/TaskmemberSelect.vue"),
        MemberList: () => import('components/MemberList.vue'),
        MapDialog: () => import('components/MapDialog.vue')
    },
    props: {
        isCreateDialog: {
            default: false
        },
        projectinfo: {
            type: Object
        },

        user: {
            type: Object
        }
    },
    data() {
        return {
            isMapDialog: false,
            taskMembers: [],
            createTask: {
                pt_id: '',
                name: "",
                address: {
                    name: '',
                    region: '',
                    position: ''
                },
                type: 0,
                isCreateNotice: 0,
                remind: 1,
                stime: '',
                etime: '',
                color: '#019a9d',
                subject: '',
                concat: '',
                description: '',

                memberList: [],
            },
            remindOptions: [{
                    name: "不提醒",
                    val: 1,
                },
                {
                    name: "开始时提醒",
                    val: 0,
                },
                {
                    name: "提前5分钟",
                    val: 300,
                },
                {
                    name: "提前15分钟",
                    val: 900,
                },
                {
                    name: "提前1小时",
                    val: 3600,
                },
                {
                    name: "提前1天",
                    val: 86400,
                },
            ],
            ranksOptions: [{
                    name: "重要紧急",
                    val: 0,
                },
                {
                    name: "重要不紧急",
                    val: 1,
                },
                {
                    name: "紧急不重要",
                    val: 2,
                },
                {
                    name: "不紧急不重要",
                    val: 3,
                },
            ],
            noticeOptions: [{
                    name: "否",
                    val: 0,
                },
                {
                    name: "是",
                    val: 1,
                },

            ],
            permissionOptions: [{
                    name: "不对外开放",
                    val: 0,
                },
                {
                    name: "需要申请加入",
                    val: 1,
                }, {
                    name: "默认可查看",
                    val: 2,
                }, {
                    name: "默认可编辑",
                    val: 3,
                },
            ],
            typeOptions: [{
                    name: '普通任务',
                    val: 0
                },
                {
                    name: '拍摄计划',
                    val: 1
                },
            ],
            isMemSeleteDialog: false,
            createUser: [],
            selectedTaskMembers: [],
            isEditPermit: false
        }
    },
    mounted() {

    },
    watch: {
        isCreateDialog: function (val) {
            console.log(val, 'createTask');
            if (val) {
                this.projectinfo.memberList.forEach(item => {
                    item.name = item.username;
                })
                this.taskMembers = this.projectinfo.memberList
                console.log(this.projectinfo, 'projectinfo');
                // let user = this.user;
                // user.name = user.username;
                // user.permission = 5;
                // if (this.createUser.length == 0) {
                //     this.createUser.push(user);

                // }
                // if (this.projectMembers.length == 0) {
                //     this.projectMembers = this.createUser.concat(this.projectMembers)
                // }
                // this.loadprojectType()
            }
        }
    },
    methods: {
        handleDeleteTask() {
            this.$q.dialog({
                dark: true,
                title: '提示',
                message: '是否删除该条日程？',
                cancel: true,
            }).onOk(() => {
                this.$q.loading.show({
                    customClass: 'mypage-loading',
                    message: '<span class="text-white text-weight-bold">删除中...</span>'
                })
                deleteTaskEvent({
                    pt_id: this.createTask.pt_id
                }).then(res => {
                    this.$q.loading.hide();

                    if (res.data.code == 1) {
                        console.log(this.createTask.ob);
                        this.createTask.ob.event.remove();
                        this.handleReset();
                        this.trigerUpdate('reload');

                        this.$message.success('删除成功')
                    } else {
                        this.$message.error(res.code.err)
                    }
                })
            }).onCancel(() => {
                // //console.log('Cancel')
            }).onDismiss(() => {
                // //console.log('I am triggered on both OK and Cancel')
            })

        },
        submitUpdateTask() {
            this.$refs.createForm.validate().then(success => {
                if (success) {
                    if (this.selectedTaskMembers.length > 0) {
                        this.createTask.memberList = this.selectedTaskMembers;
                        this.createTask.pid = this.projectinfo.pid;
                        this.$q.loading.show({
                            customClass: 'mypage-loading',
                            message: '<span class="text-white text-weight-bold">更新中...</span>'
                        })
                        updateTaskEvent({
                            data: this.createTask
                        }).then(res => {
                            this.$q.loading.hide();
                            console.log(res);
                            if (res.data.code == 1) {
                                this.handleReset();
                                this.trigerUpdate('reload');

                                this.$message.success('更新成功')
                            } else {
                                this.$message.error(res.code.err)
                            }
                        })
                    } else {
                        this.$message.warn('请选择日程成员')
                    }

                } else {
                    // 哦，不，用户至少
                    // 填写了一个无效值
                }
            })
        },
        handleStimeInput() {
            console.log('input');
            this.createTask.etime = moment(this.createTask.stime, 'YYYY-MM-DD HH:mm').add(1, 'h').format('YYYY-MM-DD HH:mm')
        },
        handleMapDialog(val) {
            this.isMapDialog = !this.isMapDialog

        },
        loadprojectType() {
            getProjectType().then(res => {
                console.log(res);
                this.typeOptions = res.data.data
            })
        },
        updatePermission(i, v) {
            this.projectMembers.forEach(item => {
                if (item.username == i.username) {
                    item.permission = v;
                }
            })
        },
        removeSelectedMember(item) {

            let index = this.selectedTaskMembers.findIndex(i => i.username == item.username);
            if (index != -1) {
                this.selectedTaskMembers.splice(index, 1)
            }
            item.name = item.username;
            this.$refs.memberSelect.removeSelected(item)
        },
        memberSelectedRes(msg, data) {
            if (msg == 'close') {
                this.isMemSeleteDialog = false;
            } else {
                this.isMemSeleteDialog = false;
                this.selectedTaskMembers = [];

                this.selectedTaskMembers = data;

            }

        },
        handleSelectMemeber() {
            this.isMemSeleteDialog = true;
        },
        trigerUpdate(type) {
            this.handleReset();
            this.$emit('update', type)
        },
        handleReset() {
            this.createTask = {
                    pt_id: '',
                    name: "",
                    address: {
                    name: '',
                    region: '',
                    position: ''
                },
                    type: 0,
                    isCreateNotice: 0,
                    remind: 1,
                    stime: '',
                    etime: '',
                    color: '#019a9d',
                    subject: '',
                    concat: '',
                    description: '',

                    memberList: [],
                },
                this.selectedTaskMembers = []
        },

        canclecreateTask() {
            this.trigerUpdate();
            // 重置验证：
            this.handleReset();
            this.$refs.createForm.resetValidation()

        },
        submitcreateTask() {
            this.$refs.createForm.validate().then(success => {
                if (success) {
                    if (this.selectedTaskMembers.length > 0) {
                        this.createTask.memberList = this.selectedTaskMembers;
                        this.createTask.pid = this.projectinfo.pid;
                        this.$q.loading.show({
                            customClass: 'mypage-loading',
                            message: '<span class="text-white text-weight-bold">创建中...</span>'
                        })
                        addTaskEvent({
                            data: this.createTask
                        }).then(res => {
                            this.$q.loading.hide();
                            console.log(res);
                            if (res.data.code == 1) {
                                this.handleReset();
                                this.trigerUpdate('reload');

                                this.$message.success('创建成功')
                            } else {
                                this.$message.error('创建失败！')
                            }
                        })
                    } else {
                        this.$message.warn('请选择日程成员')
                    }

                } else {
                    // 哦，不，用户至少
                    // 填写了一个无效值
                }
            })

        },
    }
}
</script>
